<!--开发一个todo 列表应用-->
<template>
  <div class="zk_container">
    <a-input placeholder="请输入待办事项" v-model:value="inputValue" @pressEnter="addTodo"/>
    <a-list>
      <a-list-item v-for="(item,index) in todoList" :key="item">
        <a-checkbox v-model:checked="item.checked" :disabled="item.disabled"
                    @change="selectTodo(index)">
          {{ item.label }}
        </a-checkbox>
        <a-button size="small" @click="deleteTodo(index)">x</a-button>
      </a-list-item>
    </a-list>
  </div>
</template>

<script setup>
import {ref, reactive} from 'vue';

const inputValue = ref('');
const todoList = reactive([]);

// 添加事件
const addTodo = () => {
  if (inputValue.value.trim()) {
    todoList.push({
      label: inputValue.value,
      value: inputValue.value,
      disabled: false,
      checked: false
    });
    inputValue.value = '';
  }
};

// 复选框选中事件
const selectTodo = (index) => {
  todoList[index].checked = !!todoList[index].checked;
  todoList[index].disabled = todoList[index].checked;
};

// 删除事件
const deleteTodo = (index) => {
  todoList.splice(index, 1);
};
</script>

<style scoped>
.zk_container {
  width: 50%;
  margin: 10px auto;
}
</style>
